import 'package:flutter/material.dart';
import 'package:flutter_plugin/res/colors.dart';
import 'package:flutter_plugin/widget/base/cardview.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import '../../../base/widget/base_stateful_widget.dart';
import '../../../res/style.dart';
import '../../../res/text_style.dart';
import '../../../widget/base/row_item_view.dart';
import 'tab_home_logic.dart';

class TabHomePage extends BaseStatefulWidget<TabHomeLogic> {
  TabHomePage({Key? key}) : super(key: key);

  final logic = Get.find<TabHomeLogic>();
  final state = Get.find<TabHomeLogic>().state;

  @override
  String titleString() {
    return "我的守护";
  }

  @override
  bool setTopBarStyleOrange() {
    return false;
  }

  @override
  Widget buildContent(BuildContext context) {
    return Obx(
      () => Container(
        width: double.infinity,
        height: double.infinity,
        alignment: Alignment.center,
        decoration: Styles.decorationMain,
        child: ListView(
          children: [
            _topView(),
            _stepView(),
            _actionItemView('assets/images/ic_home_menu_remote.png', "远程协助"),
            _actionItemView('assets/images/ic_home_menu_permission.png', "权限管理"),
            _actionItemView('assets/images/ic_home_menu_add.png', "添加守护人"),
            _actionItemView('assets/images/ic_home_menu_notify.png', "通知"),
            Box.hBox10,
          ],
        ),
      ),
    );
  }

  Widget _topView() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        _headView(),
        _headScrollView(),
        Text("3位亲友臻情守护着您", style: Styles.style_FF999999_12_w400),
      ],
    );
  }

  Widget _headView() {
    return Obx(
      () => SizedBox(
        height: 131.h,
        width: 375.w,
        child: ListView.builder(
            scrollDirection: Axis.horizontal,
            controller: state.scrollController,
            itemCount: state.bindList.value.length,
            itemBuilder: (context, index) {
              return _headItemView(index);
            }),
      ),
    );
  }

  Widget _headScrollView() {
    return Container(
      margin: EdgeInsets.only(top: 5.h, bottom: 5.h),
      height: 6.h,
      width: 40.w,
      decoration: BoxDecoration(
        color: ColorStyle.color_E8E8E8,
        borderRadius: BorderRadius.circular(6.r),
      ),
      child: Row(
        children: [
          Container(
            margin: EdgeInsets.only(left: state.scrollValue.value.w),
            height: 6.h,
            width: 15.w,
            decoration: BoxDecoration(
              color: ColorStyle.color_FFF06100,
              borderRadius: BorderRadius.circular(6.r),
            ),
          )
        ],
      ),
    );
  }

  Widget _headItemView(int index) {
    state.bindList.value[index].getHeadImg();
    return Obx(() => CardView(
      isRepaint: false,
      margin: index == 0
          ? EdgeInsets.only(left: 15.w, top: 10.h, right: 15.w, bottom: 10.h)
          : EdgeInsets.only(top: 10.h, right: 15.w, bottom: 10.h),
      padding: EdgeInsets.only(left: 15.w, right: 15.w),
      radius: 6.r,
      child: GestureDetector(
        onTap: () {
          showToast("点击$index");
        },
        child: Row(
          children: [
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ClipRRect(
                  borderRadius: BorderRadius.circular(6.r),
                  child: state.bindList.value[index].headImg == ""
                      ? Image(
                    height: 56.h,
                    width: 56.w,
                    image: const AssetImage('assets/images/ic_header_default.png'),
                  )
                      : Image.network(height: 56.h, width: 56.w, state.bindList.value[index].headImg),
                ),
                Box.hBox4,
                Text(state.bindList.value[index].getShowName(), style: Styles.style_FF333333_16_w500)
              ],
            ),
            Box.wBox10,
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text("守护您${state.bindList.value[index].guardDays ?? 0}天", style: Styles.style_FFF06100_12_w400),
                Box.hBox8,
                Text("${state.bindList.value[index].gps?.city}${state.bindList.value[index].gps?.area}",
                    style: Styles.style_FF999999_12_w400),
                Text("相距1米", style: Styles.style_FF999999_12_w400),
                Box.hBox8,
                Text("更新时间：${state.bindList.value[index].gps?.getUpdatedTime()}", style: Styles.style_FF999999_12_w400),
              ],
            ),
          ],
        ),
      ),
    ));
  }

  Widget _stepView() {
    return CardView(
      isRepaint: false,
      margin: EdgeInsets.only(left: 15.w, top: 10.h, right: 15.w),
      padding: EdgeInsets.only(left: 15.w, top: 10.h, right: 15.w),
      radius: 6.r,
      child: Column(
        children: [
          Row(
            children: [
              Image(
                image: const AssetImage('assets/images/icon_fence.png'),
                width: 4.w,
                height: 16.h,
              ),
              Box.wBox8,
              Text(
                "出行记录",
                style: TextStyles.textStyle(const Color(0xFF333333), 16.sp, fontWeight: FontWeight.w600),
              ),
            ],
          ),
          Box.hBox10,
          _stepTitleView(),
          _stepContentView(),
        ],
      ),
    );
  }

  Widget _stepTitleView() {
    return Container(
      height: 34.h,
      width: 315.w,
      decoration: BoxDecoration(
        color: const Color.fromRGBO(235, 96, 2, 0.1),
        borderRadius: BorderRadius.circular(6.r),
      ),
      child: Row(
        children: [
          GestureDetector(
            onTap: () {
              state.selectedIndex.value = 0;
            },
            child: Container(
              height: 34.h,
              width: 105.w,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                color: logic.selectJudgeWithIndex(0) ? const Color(0xFFEB6002) : Colors.transparent,
                borderRadius: BorderRadius.circular(6.r),
              ),
              child: Text(
                '今天',
                textAlign: TextAlign.center,
                style: TextStyles.styleWithColorAndFontSize(
                    logic.selectJudgeWithIndex(0) ? Colors.white : const Color(0xFF333333), 14.sp),
              ),
            ),
          ),
          GestureDetector(
            onTap: () {
              state.selectedIndex.value = 1;
            },
            child: Container(
              height: 34.h,
              width: 105.w,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                color: logic.selectJudgeWithIndex(1) ? const Color(0xFFEB6002) : Colors.transparent,
                borderRadius: BorderRadius.circular(6.r),
              ),
              child: Text(
                '本周',
                textAlign: TextAlign.center,
                style: TextStyles.styleWithColorAndFontSize(
                    logic.selectJudgeWithIndex(1) ? Colors.white : const Color(0xFF333333), 14.sp),
              ),
            ),
          ),
          GestureDetector(
            onTap: () {
              state.selectedIndex.value = 2;
            },
            child: Container(
              height: 34.h,
              width: 105.w,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                color: logic.selectJudgeWithIndex(2) ? const Color(0xFFEB6002) : Colors.transparent,
                borderRadius: BorderRadius.circular(6.r),
              ),
              child: Text(
                '本月',
                textAlign: TextAlign.center,
                style: TextStyles.styleWithColorAndFontSize(
                    logic.selectJudgeWithIndex(2) ? Colors.white : const Color(0xFF333333), 14.sp),
              ),
            ),
          )
        ],
      ),
    );
  }

  Widget _stepContentView() {
    return Column(
      children: [
        Visibility(
          visible: state.selectedIndex.value == 0,
          child: Container(
            margin: EdgeInsets.only(top: 20.h, bottom: 20.h),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Image(
                      image: const AssetImage('assets/images/ic_bushu_count.png'),
                      width: 40.w,
                      height: 40.h,
                    ),
                    Box.hBox16,
                    Text(
                      "2892步",
                      style: TextStyles.textStyle(const Color(0xFF333333), 14.sp, fontWeight: FontWeight.w400),
                    ),
                  ],
                ),
                Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Image(
                      image: const AssetImage('assets/images/ic_bushu_distance.png'),
                      width: 40.w,
                      height: 40.h,
                    ),
                    Box.hBox16,
                    Text(
                      "2.13公里",
                      style: TextStyles.textStyle(const Color(0xFF333333), 14.sp, fontWeight: FontWeight.w400),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
        Visibility(
          visible: state.selectedIndex.value == 1,
          child: Container(
            margin: EdgeInsets.only(top: 10.h, bottom: 10.h),
            child: Column(
              children: [
                Container(
                  alignment: Alignment.centerRight,
                  child: Text(
                    "本周共行走了 23134步  12.34公里",
                    style: TextStyles.textStyle(const Color(0xFF333333), 14.sp, fontWeight: FontWeight.w500),
                  ),
                ),
                Box.hBox5,
                Container(
                  alignment: Alignment.centerRight,
                  child: Text(
                    "统计时间：2022/11/18 19:23",
                    style: TextStyles.textStyle(const Color(0xFF666666), 12.sp, fontWeight: FontWeight.w400),
                  ),
                ),
              ],
            ),
          ),
        ),
        Visibility(
          visible: state.selectedIndex.value == 2,
          child: Container(
            margin: EdgeInsets.only(top: 10.h, bottom: 10.h),
            child: Column(
              children: [
                Container(
                  alignment: Alignment.centerRight,
                  child: Text(
                    "本月共行走了 1623134步  41.36公里",
                    style: TextStyles.textStyle(const Color(0xFF333333), 14.sp, fontWeight: FontWeight.w500),
                  ),
                ),
                Box.hBox5,
                Container(
                  alignment: Alignment.centerRight,
                  child: Text(
                    "统计时间：2022/11/26 19:23",
                    style: TextStyles.textStyle(const Color(0xFF666666), 12.sp, fontWeight: FontWeight.w400),
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }

  Widget _actionItemView(String icon, String name) {
    return CardView(
      isRepaint: false,
      margin: EdgeInsets.only(left: 15.w, top: 10.h, right: 15.w),
      padding: EdgeInsets.only(left: 15.w, top: 5.h, right: 15.w, bottom: 5.h),
      radius: 6.r,
      child: RowItemView(
        icon: icon,
        name: name,
        backVisible: false,
        onclick: () {
          showToast("点击$name");
        },
      ),
    );
  }
}
